$(function() {
    var layer = layui.layer
    var form = layui.form
    var laypage = layui.laypage
    var obj = {
            page: 1,
            limit: 10
        }
        //.....................................................

    //搜索功能
    $('#user-search').click(function(e) {
        e.preventDefault()
        $.ajax({
            method: 'GET',
            url: '/ydd_user/list',
            data: $('#form-search').serialize(),
            success: function(res) {
                // console.log(res);
                if (res.errno == 0) {
                    var htmlStr = template('tpl-table', res.data)
                    $('tbody').html(htmlStr)
                } else {
                    console.log('2345');
                    layer.msg('筛选失败')
                }
            }
        })
        form.render()
    })

    //点击file上传功能.......................................
    $('body').on('click', '#update-btn', function(e) {
        e.preventDefault()
            // console.log(1);
        $('#coverFile').click()
    })
    $('body').on('click', '#update-btn2', function(e) {
            e.preventDefault()
                // console.log(1);
            $('#change').click()
        })
        //.....................................................

    //渲染用户列表信息
    initArtCateList()
        //封装用户列表信息函数
    function initArtCateList() {
        //发起ajax请求获取用户信息
        $.ajax({
            method: 'GET',
            url: '/ydd_user/list',
            data: obj,
            success: function(res) {
                // console.log(res);
                var htmlStr = template('tpl-table', res.data)
                $('tbody').html(htmlStr)
                renderPage(res.data.count)
            }
        })
    }
    //.....................................................

    //动态获取点击编辑按钮实现获取用户信息功能
    var indexEdit = null
    var id = 0
    $('tbody').on('click', '.btn-edit', function() {
            indexEdit = layer.open({
                type: 1,
                area: ['600px', '350px'],
                title: "修改用户",
                content: $('#dialog-edit').html()
            })

            form.render()
            id = $(this).attr('data-id')
            console.log(id);
            //发起请求获取用户的数据
            $.ajax({
                method: 'GET',
                url: '/ydd_user/rowInfo',
                data: {
                    id
                },
                success: function(res) {
                    console.log(res);
                    form.val('form-edit', res.data)
                }
            })
        })
        //.....................................................
        //更新修改用户信息功能.......................
    $('body').on('submit', '#form-edit', function(e) {
            var str = $(this).serialize();
            if (str.indexOf('sex') !== -1) {
                sex = 1 //女
            } else {
                sex = 0 //男
            }
            console.log(sex);
            e.preventDefault()
            $.ajax({
                method: 'POST',
                url: '/ydd_user/update',
                ContentType: 'multipart/form-data',
                data: {
                    id,
                    icon,
                    username: $('#name1').val(),
                    mobile: $('#mobilephone1').val(),
                    password: $("#pwd1").val(),
                    sex,
                },
                success: function(res) {
                    console.log(res);
                    if (res.errno !== 0) {
                        return layer.msg('更新数据失败')
                    }
                    layer.msg('更新数据成功')
                    layer.close(indexEdit)
                    initArtCateList()

                }
            })
        })
        //.................................................
        //删除功能....................................................
    $('tbody').on('click', '.btn-delete', function() {
            var id = $(this).attr('data-id')
                // $('#image').hide()
            console.log(id);
            layer.confirm('确定删除吗,是否继续?', { icon: 3, title: '提示' }, function(index) {
                $.ajax({
                    method: 'GET',
                    url: '/ydd_user/del',
                    data: {
                        id: id
                    },
                    success: function(res) {
                        if (res.errno !== 0) {
                            return layer.msg('删除失败')
                        }
                        layer.msg('删除成功')
                        layer.close(index)
                        initArtCateList()
                    }
                })

            })
        })
        // 定义一个文件对象用来接收你所选择的文件
    var file = null
        // 获取文件在服务器的地址
    var icon = null
    $('body').on('change', '#change', function(e) {
            console.log(111);
            var fileList = e.target.files
            console.log(fileList);
            if (fileList.length === 0) {
                return file = null
            }
            // 根据文件，创建对应的 URL 地址
            var newImgURL = URL.createObjectURL(fileList[0])

            $('#image').attr('src', newImgURL)
            file = fileList[0]
            var fd = new FormData()
            fd.append('file', file)
                // 发送请求将图片上传到服务器
            $.ajax({
                method: 'POST',
                url: '/common/upload?type=images',
                data: fd,
                contentType: false,
                processData: false,
                success: function(res) {
                    if (res.errno !== 0) return layui.layer.msg('上传图片失败!');
                    setTimeout(function() {
                        $('.layui-icon-ok').show()
                        layui.layer.msg('图片上传成功!');
                        icon = res.data.savePath
                        console.log(icon);
                    }, 1000)
                }
            })
        })
        // .................................................
    $('body').on('change', '#coverFile', function(e) {
            console.log(111);
            var fileList = e.target.files
                // console.log(fileList);
            if (fileList.length === 0) {
                return file = null
            }
            // 根据文件，创建对应的 URL 地址
            var newImgURL = URL.createObjectURL(fileList[0])

            $('#image').attr('src', newImgURL)
            file = fileList[0]
            var fd = new FormData()
            fd.append('file', file)
                // 发送请求将图片上传到服务器
            $.ajax({
                method: 'POST',
                url: '/common/upload?type=images',
                data: fd,
                contentType: false,
                processData: false,
                success: function(res) {
                    if (res.errno !== 0) return layui.layer.msg('上传图片失败!');
                    setTimeout(function() {
                        $('.layui-icon-ok').show()
                        layui.layer.msg('图片上传成功!');
                        icon = res.data.savePath
                            // console.log(icon);
                    }, 1000)
                }
            })
        })
        // ......................................................

    // 新增功能
    $('#add-btn').on('click', function() {
        indexEdit = layer.open({
            type: 1,
            area: ['600px', '350px'],
            title: "修改用户",
            content: $('#dialog-add').html()
        })
        form.render()
    })


    //分页器。。。。。。。。。。。。。。。。。。。。。。。
    // 渲染分页
    function renderPage(total) {
        console.log(total);
        // 使用laypage.render()来渲染分页
        laypage.render({
            elem: 'fenye', //分页容器的id
            count: total, //总数据的个数
            limit: obj.limit, //一页显示几条数据
            curr: obj.page, //默认显示的页码
            //定义每页条数的选择项
            limits: [10, 20, 30, 40],
            // 定义分页器中的组件
            layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'],
            // 分页切换时会触发,render方法被调用也会触发jump
            // 里面有一个布尔值得参数first,如果是自动加载触发则是true
            // 如果是点击分页器触发则是undefined,
            jump: function(page, first) {
                // console.log(page.curr);
                obj.page = page.curr
                    // 赋值完成后需要再次调用initTable()方法
                    //直接调用会造成程序的死循环,因为initTable()中调用了renderPage()方法
                    // 当一条显示的最新的数据重新赋值给obj.pagesize
                obj.limit = page.limit
                if (!first) {
                    // 通过点击分页器,则对文章列表进行重新渲染
                    initArtCateList()
                }
            }
        })

    }

    //新增数据....................................................
    $('body').on('submit', '#form-add', function(e) {
        var str1 = $(this).serialize();
        if (str1.indexOf('sex') !== -1) {
            sex = 1 //女
        } else {
            sex = 0 //男
        }
        e.preventDefault()
            // $('.layui-icon-ok').hide()
            // $('#image').hide()
        $.ajax({
            method: 'POST',
            url: '/ydd_user/add',
            data: {
                icon,
                username: $('#name').val(),
                mobile: $('#mobilephone').val(),
                password: $("#pwd").val(),
                sex,
            },
            success: function(res) {
                console.log(res);
                if (res.errno !== 0) {
                    return layer.msg('新增失败')
                }
                layer.msg('新增成功')
                layer.close(indexEdit)
                initArtCateList()
            }
        })
    })

})